<template>
    <Center>
        <div class="p-8" style="height: 100%;">
            <div class="text-gray-700 font-bold">我的收藏</div>
            <div class="mt-3">
                <el-space>
                    <el-button type="primary" class="bg-blue-500" :icon="CaretRight" @click="getCollectList(1)">播放全部</el-button>
                    <el-button  :icon="Share">分享</el-button>
                    <el-button :icon="Download">下载全部</el-button>
                </el-space>
            </div>
            <el-table class="mt-4" :data="tableData" stripe style="width: 100%" @row-click="onClick">
                <el-table-column prop="index" label="序号" />
                <el-table-column prop="title" label="歌名" />
                <el-table-column prop="bpm" label="BPM" />
                <el-table-column prop="duration" label="时长" />
                <el-table-column prop="auther" label="发布者" />
                <el-table-column prop="price" label="售价" />
                <el-table-column prop="caozuo" label="操作" width="180" />
            </el-table>
        </div>
    </Center>
</template>
<script setup>
import test from "@/assets/imgs/1.webp";
import Center from '../../components/common/Center.vue'
import { Delete, CaretRight, Search, Share, Download } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { musicCollectMy,musicInfo } from "@/http/api";
import { ref, computed, onMounted, watch } from "vue";
import { add , list } from '@/components/common/music';  
const router = useRouter();
const page = ref(1);
const albumList = ref([]);
const baseUrl = import.meta.env.VITE_API_URL;
const tableData = ref([]);

onMounted(() => {
    getCollectList();
});

const getCollectList = async (e) => {
    const { data } = await musicCollectMy();
    list.value = [];
    tableData.value = [];
    data.music.forEach((item, index) => {

        tableData.value.push({
            index:index+1,
            image:item.image,
            id:item.id,
            title:item.title,
            bpm:item.user.name,
            duration:item.duration,
            auther:item.user.name,
            price:"￥"+item.price,
            caozuo:''
        });

        list.value.push({
            name:item.title,
            author:item.user?.name,
            url:baseUrl +item.audio,
            image:baseUrl +item.image,
        })
    });
}

const onClick = function (row) {
    console.log(row)
    getMusicInfo(row)
}
const getMusicInfo = async (e) => {
    const { data } = await musicInfo({
        id:e.id
    });
    const music_list = {name:data.music.title,author:data.music.user?.name,url:baseUrl +data.music.audio,image:baseUrl + data.music.image};
    console.log("123",music_list);
    add(music_list)
}
</script>